<!--
* @author wn
* @date 2022/10/19 15:40:17
* @description: 首页右上角  订单数量  组件
!-->
<template>
	<div class="order-number">
		<el-card
			v-for="item in orderNumberList"
			:key="item.name"
			:body-style="{ display: 'flex', padding: '0' }"
		>
			<el-icon :size="80" color="#fff" :style="{ backgroundColor: item.color }">
				<component :is="item.icon" />
			</el-icon>
			<div class="desc">
				<p>￥{{ item.value }}</p>
				<p>{{ item.name }}</p>
			</div>
		</el-card>
	</div>
</template>
<script>
import { getHomeOrderNumber } from '@/network/home'
import { ref } from 'vue'
import { SuccessFilled, StarFilled, GoodsFilled } from '@element-plus/icons-vue'

export default {
	name: 'OrderNumber',
	components: { SuccessFilled, StarFilled, GoodsFilled },
	setup() {
		// 获取 订单数量
		const orderNumberList = ref(null)
		getHomeOrderNumber().then(({ result }) => (orderNumberList.value = result))

		return { orderNumberList }
	},
}
</script>
<style scoped lang="scss">
.order-number {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.el-card {
		flex: 0 32%;
		// flex-grow: 0;
		margin-bottom: 20px;
		.desc {
			margin-left: 15px;
			p {
				color: #ccc;
				&:first-child {
					line-height: 1.6;
					font-size: 30px;
					color: #999;
				}
			}
		}
	}
}
</style>
